<!--
 * @Author: your name
 * @Date: 2021-10-21 10:47:42
 * @LastEditTime: 2021-10-21 16:52:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /a1902-a-group/vue_domei18n_style/src/App.vue
-->
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <button>{{$t('header_menu.logout')}}</button>
    <div class="daily" @click="changeMode">
      <span :class="stylespan"></span>
      <span :class="stylespans "></span>
      <small :class="samllLien"></small>
      <small :class="samllLien"></small>
      <small :class="samllLien"></small>
      <small :class="samllLien"></small>
      <small :class="samllLien"></small>
      <small :class="samllLien"></small>
    </div>

    <div class="header">哈哈哈哈哈</div>
  </div>
  <router-view/>
</template>

<script>
import {myChangeMixin, styleMixin} from './mixin'
export default {
  data() {
    return {
      stylespan: 'daily_item_span',
      stylespans: 'daily_item_spans',
      samllLien: 'samll_lien'
    }
  },
  mixins: [styleMixin],
  methods: {
    changeMode() {
      styleModeChange(!this.nightModeStyle);
    }
  },
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  h1::-moz-selection{background:#ff0064;color:#fff;}
  h1::selection{background:#ff0064;color:#fff;}
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
  .daily {
    position: relative;
    height: 24px;
    width: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      .samll_lien:nth-child(3) {
          transform: rotate(calc(3 * calc(1turn / 12)) - 20deg);
        }
        .samll_lien:nth-child(4) {
          transform: rotate(calc(4 * calc(1turn / 12)) - 20deg);
        }
        .samll_lien:nth-child(5) {
          transform: rotate(calc(5 * calc(1turn / 12)) - 20deg);
        }
        .samll_lien:nth-child(6) {
          transform: rotate(calc(6 * calc(1turn / 12)) - 20deg);
        }
        .samll_lien:nth-child(7) {
          transform: rotate(calc(7 * calc(1turn / 12)) - 20deg);
        }
        .samll_lien:nth-child(8) {
          transform: rotate(calc(8 * calc(1turn / 12)) - 20deg);
        }
        .dark_item_span{
          transform: scale(1) translate(20%,-40%);
        }
    }
        
    .daily_item_span {
      position: absolute;
      border-radius: 50%;
      top: 0;
      right: 0;
      transform: scale(0) translate(-100%,35%);
      z-index: 9;
      transition: transform .4s;
      transform-origin: right;
      background: #eec413;
    }
    .daily_item_spans {
      position: relative;
      z-index: 3;
      background: #eec413;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #fff;
    }

    .dark_item_span{
      height: 28px;
      width: 28px;
      transform: scale(1) translate(35%,-35%);
      background: #171B30;
    }
    .dark_item_spans {
      position: relative;
      z-index: 3;
      background: #e684af;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #171B30;
      transform: none;
    }
    
    .samll_lien:nth-child(3) {
      transform: rotate(calc(3 * calc(1turn / 12)));
    }
    .samll_lien:nth-child(4) {
      transform: rotate(calc(4 * calc(1turn / 12)));
    }
    .samll_lien:nth-child(5) {
      transform: rotate(calc(5 * calc(1turn / 12)));
    }
    .samll_lien:nth-child(6) {
      transform: rotate(calc(6 * calc(1turn / 12)));
    }
    .samll_lien:nth-child(7) {
      transform: rotate(calc(7 * calc(1turn / 12)));
    }
    .samll_lien:nth-child(8) {
      transform: rotate(calc(8 * calc(1turn / 12)));
    }
    .samll_lien {
      width: 2px;
      background: #eec413;
      display: block;
      height: 125%;
      position: absolute;
      z-index: 2;
      transition: all .4s,height .3s ease-in-out;
    }
    .dark_samll {
      height: 0;
      transition: .4s,transform .4s,height .2s .1s;
    }

  }
}
</style>